<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>微信配置测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 30px;
        }
        .section {
            margin-bottom: 30px;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .section h2 {
            color: #666;
            margin-top: 0;
        }
        .config-item {
            margin-bottom: 15px;
            padding: 10px;
            background: #f9f9f9;
            border-radius: 3px;
        }
        .config-item strong {
            color: #333;
        }
        .btn {
            background: #07c160;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin-right: 10px;
            margin-bottom: 10px;
        }
        .btn:hover {
            background: #06ad56;
        }
        .btn-danger {
            background: #fa5151;
        }
        .btn-danger:hover {
            background: #e64340;
        }
        .result {
            margin-top: 15px;
            padding: 15px;
            border-radius: 5px;
            white-space: pre-wrap;
            font-family: monospace;
        }
        .success {
            background: #d4edda;
            border: 1px solid #c3e6cb;
            color: #155724;
        }
        .error {
            background: #f8d7da;
            border: 1px solid #f5c6cb;
            color: #721c24;
        }
        .info {
            background: #d1ecf1;
            border: 1px solid #bee5eb;
            color: #0c5460;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>微信配置测试页面</h1>
        
        <div class="section">
            <h2>当前配置信息</h2>
            <div class="config-item">
                <strong>AppID:</strong> wxba6d430072eb9640
            </div>
            <div class="config-item">
                <strong>AppSecret:</strong> b4e9c3a5f399a946ef1021cf9bc0c16b
            </div>
            <div class="config-item">
                <strong>Token:</strong> 62eKOmTqstPiuPzQDWfbrpKD1r1mbO6F
            </div>
            <div class="config-item">
                <strong>EncodingAESKey:</strong> 8GCc6CMvAYbHVtYaYyj8t6XzmMbloRtSBmlElzNrTt4
            </div>
        </div>
        
        <div class="section">
            <h2>微信菜单管理</h2>
            <button class="btn" onclick="createMenu()">创建菜单</button>
            <button class="btn" onclick="getMenu()">获取菜单</button>
            <button class="btn btn-danger" onclick="deleteMenu()">删除菜单</button>
            <div id="menuResult" class="result" style="display:none;"></div>
        </div>
        
        <div class="section">
            <h2>微信JS-SDK配置测试</h2>
            <button class="btn" onclick="testJsSdkConfig()">测试JS-SDK配置</button>
            <div id="jsSdkResult" class="result" style="display:none;"></div>
        </div>
        
        <div class="section">
            <h2>微信服务器验证</h2>
            <div class="config-item">
                <strong>验证URL:</strong> https://yourdomain.com/wechat/verify
            </div>
            <div class="config-item">
                <strong>Token:</strong> 62eKOmTqstPiuPzQDWfbrpKD1r1mbO6F
            </div>
            <p>请在微信公众平台"基本配置"中设置服务器URL为上述地址</p>
        </div>
        
        <div class="section">
            <h2>H5应用访问</h2>
            <div class="config-item">
                <strong>H5应用入口:</strong> <a href="/h5/" target="_blank">https://yourdomain.com/h5/</a>
            </div>
            <div class="config-item">
                <strong>商家入驻:</strong> <a href="/h5/#/pages/onboarding/index" target="_blank">https://yourdomain.com/h5/#/pages/onboarding/index</a>
            </div>
            <div class="config-item">
                <strong>个人中心:</strong> <a href="/h5/#/pages/member/index" target="_blank">https://yourdomain.com/h5/#/pages/member/index</a>
            </div>
        </div>
    </div>

    <script>
        // 创建微信菜单
        function createMenu() {
            showResult('menuResult', 'info', '正在创建微信菜单...');
            
            fetch('/wechat/menu/create')
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        showResult('menuResult', 'success', '菜单创建成功！\n' + JSON.stringify(data, null, 2));
                    } else {
                        showResult('menuResult', 'error', '菜单创建失败：\n' + data.message);
                    }
                })
                .catch(error => {
                    showResult('menuResult', 'error', '请求失败：\n' + error.message);
                });
        }
        
        // 获取微信菜单
        function getMenu() {
            showResult('menuResult', 'info', '正在获取微信菜单...');
            
            fetch('/wechat/menu/get')
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        showResult('menuResult', 'success', '菜单获取成功！\n' + JSON.stringify(data.data, null, 2));
                    } else {
                        showResult('menuResult', 'error', '菜单获取失败：\n' + data.message);
                    }
                })
                .catch(error => {
                    showResult('menuResult', 'error', '请求失败：\n' + error.message);
                });
        }
        
        // 删除微信菜单
        function deleteMenu() {
            if (!confirm('确定要删除微信菜单吗？')) {
                return;
            }
            
            showResult('menuResult', 'info', '正在删除微信菜单...');
            
            fetch('/wechat/menu/delete')
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        showResult('menuResult', 'success', '菜单删除成功！\n' + JSON.stringify(data, null, 2));
                    } else {
                        showResult('menuResult', 'error', '菜单删除失败：\n' + data.message);
                    }
                })
                .catch(error => {
                    showResult('menuResult', 'error', '请求失败：\n' + error.message);
                });
        }
        
        // 测试JS-SDK配置
        function testJsSdkConfig() {
            showResult('jsSdkResult', 'info', '正在测试JS-SDK配置...');
            
            const url = window.location.href;
            fetch('/api/wechat/config?url=' + encodeURIComponent(url))
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        showResult('jsSdkResult', 'success', 'JS-SDK配置测试成功！\n' + JSON.stringify(data.data, null, 2));
                    } else {
                        showResult('jsSdkResult', 'error', 'JS-SDK配置测试失败：\n' + data.message);
                    }
                })
                .catch(error => {
                    showResult('jsSdkResult', 'error', '请求失败：\n' + error.message);
                });
        }
        
        // 显示结果
        function showResult(elementId, type, message) {
            const element = document.getElementById(elementId);
            element.className = 'result ' + type;
            element.textContent = message;
            element.style.display = 'block';
        }
    </script>
</body>
</html>
